import React, { useCallback, useEffect, useState } from 'react';
import { Input, Tabs, Checkbox, Divider, Row, Col, } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import { fieldDataPreview } from 'src/services/DataManage';
import 'src/pages/AnalyseManage/EditReport/index.module.scss';

const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;

interface IProps {
	field: any;
	sourceId: string;
	tableName: string;
	conditions: any;
	setDimensionStringList: Function;
}

const FilterFieldString = ( props: IProps ) => {
	const { field, sourceId, tableName, setDimensionStringList } = props;
	const [ keyword, setKeyword ] = useState( '' );

	const [ timer, setTimer ] = useState( null );
	const [ plainOptions, setPlainOptions ] = useState( [] );		//	全部可选项
	const [ searchOptions, setSearchOptions ] = useState( [] );		//	模糊匹配可选项
	const [ checkedList, setCheckedList ] = React.useState( [] );
	const [ indeterminate, setIndeterminate ] = React.useState( true );
	const [ checkAll, setCheckAll ] = React.useState( false );

	const getList = useCallback( () => {
		let temp = plainOptions.filter( v => {
			if ( [ 'null', 'undefined' ].indexOf( String( v ) ) > -1 ) {
				return false;
			}
			return String( v ).indexOf( keyword ) > -1;
		} );
		setSearchOptions( temp );
	}, [ plainOptions, keyword ] );

	const handleSearchInput = ( e ) => {
		e.persist();

		let value = e.target.value;

		if ( timer ) clearTimeout( timer );
		let newTimer = setTimeout( () => {
			setKeyword( value );
		}, 300 );
		setTimer( newTimer );
	};

	const onChange = list => {
		setCheckedList( list );
		setIndeterminate( !!list.length && list.length < searchOptions.length );
		setCheckAll( list.length === searchOptions.length );
	};

	const onCheckAllChange = e => {
		setCheckedList( e.target.checked ? searchOptions : [] );
		setIndeterminate( false );
		setCheckAll( e.target.checked );
	};

	const fetchData = useCallback( async () => {
		setKeyword( '' );
		setPlainOptions( [] );
		const params = {
			field: field.name,
			sourceId,
			tableName,
		};
		const info = await fieldDataPreview( params );
		if ( info.data.success ) {
			setPlainOptions( info.data.data );
		}
	}, [ field, sourceId, tableName ] );

	useEffect( () => {
		fetchData();
	}, [ fetchData ] );

	useEffect( () => {
		getList();
	}, [ timer, getList ] );


	//	列表选择
	const setList = useCallback( () => {
		// if ( checkedList.length === 0 ) return;
		const condition = {
			field: field.name,
			symbol: 'IN',
			values: checkedList.length ? checkedList : null,
		};
		if ( checkedList.length === 1 ) {
			condition.symbol = 'EQ';
		}
		// console.log( '==== condition ===', condition );

		setDimensionStringList( [ condition ] );
	}, [ checkedList, field, setDimensionStringList ] );

	useEffect( () => {
		setList();
	}, [ setList ] );

	useEffect( () => {
		let condValues = [];
		props.conditions.forEach( item => {
			condValues.push( ...item.values );
		} );
		if ( condValues.length ) {
			setCheckedList( condValues );
		}
	}, [ props.conditions ] );
	
	return (
		<Tabs defaultActiveKey="1" type='card'>
			<TabPane tab="列表" key="1">
				<Row justify="space-between">
					<Col span={ 12 }>
						<Input
							placeholder="请输入内容"
							allowClear
							onChange={ handleSearchInput }
							prefix={ <SearchOutlined/> }
						/>
					</Col>
				</Row>
				<Checkbox
					indeterminate={ indeterminate } onChange={ onCheckAllChange } checked={ checkAll }
					style={ { marginTop: '20px' } }>
					全选
				</Checkbox>
				<Divider style={ { margin: '15px 0' } }/>
				<CheckboxGroup options={ searchOptions } value={ checkedList } onChange={ onChange }
											 className='filter_field_modal_checkbox'/>
			</TabPane>
		</Tabs>
	);
};

export default React.memo( FilterFieldString );
